import { defineComponent, PropType } from "vue";

import "./styles/ServieItem.scss";

interface servieItem {
  pic: string;
  title: string;
  view: number;
  desc: string;
  danmaku: number;
  reply: number;
  coin: number;
  share: number;
  like: number;
}

export default defineComponent({
  name: "ServieItem",
  props: {
    data: {
      type: Object as PropType<servieItem>,
      default: () => {
        return {};
      }
    }
  },
  setup(props) {
    const { data } = props;
    const formatNumber = (num: number) => {
      let res = "";
      if (num) {
        res = num.toString();
        if (num > 10000) {
          num = num / 10000;
          res = num.toFixed(2) + "万";
        }
        if (num > 10000) {
          num = num / 10000;
          res = num.toFixed(2) + "亿";
        }
      }

      return res;
    };

    const getValue = (val: number) => {
      return formatNumber(val);
    };

    return () => {
      return (
        <div class="card-item">
          <a-card hoverable bordered style="width: 100%">
            <div class="left-con">
              <img alt="example" src={data.pic} />
            </div>
            <div class="right-con">
              <div class="title" style="width: 100%">
                {data.title}
              </div>
              <div class="sort-info">
                <div style="flex: 1">
                  <a-row type="flex" style="margin-bottom: 1rem">
                    <a-space size={30}>
                      <a-statistic title="播放量" value={getValue(data.view)} />
                      <a-statistic
                        title="弹幕量"
                        value={getValue(data.danmaku)}
                      />
                      <a-statistic
                        title="评论量"
                        value={getValue(data.reply)}
                      />
                      <a-statistic title="硬币量" value={getValue(data.coin)} />
                      <a-statistic title="点赞量" value={getValue(data.like)} />
                      <a-statistic
                        title="分享量"
                        value={getValue(data.share)}
                      />
                    </a-space>
                  </a-row>
                </div>
              </div>
              <div class="evaluate">简介:{data.desc}</div>
            </div>
          </a-card>
        </div>
      );
    };
  }
});
